<template>
  <component
    :childShow="props.childShow"
    :is="getExhibitsComponent"
    :width="props.info.width"
    :indexs="props.indexs"
    :height="props.info.height"
    :info="props.info"
    :AuxiliaryId="props.AuxiliaryId"
    :childId="props.childId"
    :selectInfo="props.selectInfo"
    @emitChildItemDraggable="emitChildItemDraggable"
    @emitChildItemDraggableStyle="emitChildItemDraggableStyle"
    @emitShowcaseDraggable="emitShowcaseDraggable"
    @emitShowcaseDraggableStyle="emitShowcaseDraggableStyle"
  ></component>
</template>

<script setup lang="ts">
import { ExhibitionList } from '@/material/index';
import cabinet from './cabinet/index.vue'; //展柜
import exhibitionStand from './exhibitionStand/index.vue'; //展架
import displayBoard from './displayBoard/index.vue'; //展板
import { DraggableContainer } from 'vue3-draggable-resizable';
import FlotMenu from '@/components/flotMenu/OutlineMenu.vue';
import ContextMenu from '@imengyu/vue3-context-menu';
import { getDraggableNumber, getExhibitsHeightRest, getdisabledY } from '@/utils/getRemComputed';
import { ref, reactive, watch, nextTick, computed } from 'vue';
import { exbitMenuShow, exbitListMenuShow } from '@/hooks/menuHooks';
import { useProjectStore } from '@/store';
import { publicUrls } from '@/utils/minxin';

const emit = defineEmits([
  'emitChildDraggable',
  'emitChildDraggableStyle',
  'emitShowcaseDraggable',
  'emitShowcaseDraggableStyle',
]);
const store = useProjectStore();
const contextMenuTrigger = ref(); //列表盒子dom
const parentLock = ref(true);
const childShow = ref(true);
const draggableResizable = ref(); //父级拖拽盒子ref
const timer = ref();

const props = defineProps({
  childShow: {
    type: Boolean,
  },
  selectInfo: {
    type: Object,
  },
  width: {
    type: Number || String,
  },
  height: {
    type: Number || String,
  },
  indexs: {
    type: Number,
  },
  info: {
    type: Object,
  },
  childId: {
    type: Number,
  },
  AuxiliaryId: {
    type: Number,
  },
});
const getExhibitsComponent = computed(() => {
  switch (props.selectInfo.type) {
    case 'cabinet':
      return cabinet;
      break;
    case 'exhibitionStand':
      return exhibitionStand;
      break;
    case 'displayBoard':
      return displayBoard;
      break;
    default:
      return displayBoard;
      break;
  }
});
const emitChildItemDraggable = (draggingInfo: any, childIndex: number) => {
  emit('emitChildDraggable', draggingInfo, childIndex); //分组传递当前展品图距离相对父元素的xy偏移量变化
};
const emitChildItemDraggableStyle = (draggingInfo: any, childIndex: number) => {
  emit('emitChildDraggableStyle', draggingInfo, childIndex); //分组设置当前展品图距离相对父元素的宽高变化
};
const emitShowcaseDraggable = (draggingInfo: any) => {
  emit('emitShowcaseDraggable', draggingInfo); //传递当前展柜图距离相对父元素的xy偏移量变化
};
const emitShowcaseDraggableStyle = (draggingInfo: any) => {
  emit('emitShowcaseDraggableStyle', draggingInfo); //传递当前展柜距离相对父元素的宽高变化
};

const handleMouseDown = (event) => {
  event.stopPropagation();
};
const preventDefaultDrag = (event) => {
  event.stopPropagation();
};

// watch(
//   () => props.info.width,
//   () => {
//     childShow.value = false;
//     nextTick(() => {
//       childShow.value = true;
//     });
//   },
//   { deep: true },
// );
// watch(
//   () => props.info.height,
//   () => {
//     childShow.value = false;
//     nextTick(() => {
//       childShow.value = true;
//     });
//   },
//   { deep: true },
// );

//
</script>

<style lang="less" scoped>
.exhibits-content {
  position: relative;
  display: flex;
  z-index: 999;
  padding: 0px;
  // -webkit-box-reflect: below -7% linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

.active {
  :deep(.flot-menu) {
    display: flex;
    z-index: 99999;
  }
}
:deep(.active) {
  z-index: 999;
}
:deep(.vdr-handle) {
  z-index: 66;
}

</style>
